@import '../../../styles/util'

\:host
  display: flex
  flex-direction: column
  width: 18.75rem
  padding-bottom: .5rem
  background: $bg-body
  border-radius: 0.25rem

  .fui-calendar-header
    display: flex
    align-items: baseline
    justify-content: center
    width: 100%
    height: 4.5rem
    padding: 1rem
    color: $text-reverse
    background-color: $brand-primary
    border-top-left-radius: 0.25rem
    border-top-right-radius: 0.25rem

    .viewActive
      opacity: 1
      cursor: default

    &-year
      margin-bottom: 0.6rem
      font-size: 1rem
      opacity: 0.7
      cursor: pointer
      font-weight: bold
      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms

      &.viewActive
        font-size: 2.25rem

    &-date
      font-size: 1rem
      opacity: 0.7
      cursor: pointer
      font-weight: 500
      transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
      margin-left: 0.25rem

      &.viewActive
        font-size: 2rem

  .fui-calendar-controls
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    height: 2.8rem
    padding: 0 0.5rem

    &-text
      color: $text-default
      font-size: 1rem

    .previous-button, .next-button
      position: relative
      display: flex
      align-items: center
      justify-content: center
      width: 1.8rem
      height: 1.8rem
      background: $bg-body
      user-select: none
      cursor: pointer
      outline: 0
      border: none

      @include icon-ripple-btn($brand-default)

    .next-button
      margin-left: 1rem

  .fui-calendar-content
    width: 100%

  .fui-calendar-time
    @include flex-align(center, flex-end)
    padding: 0.5rem 0.5rem 0 0.5rem

\:host ::ng-deep

  .fui-timepicker
    width: 100%

    .fui-timepicker-input
      width: 100%
